<template>
	<view class="wrapper">
		<view class="uni-segmented-control-wrapper">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
				activeColor="#4BB7DB" inActiveColor="#f2f3f5"></uni-segmented-control>
			<view class="content">
				<view v-show="current === 0">
					<ToDoList />
				</view>
				<view v-show="current === 1">
					<AlreadyDone />
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import ToDoList from "./to-do-list.vue";
	import AlreadyDone from "./already-done.vue";

	const items = ref(['我的待办', '我的已办']);
	const current = ref(0);

	function onClickItem(e) {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper::v-deep .uni-section-header{
		display: none!important;
	}
	
	.wrapper::v-deep .uni-segmented-control-wrapper {
		border-radius: 10rpx;
		padding: 15rpx 0;
	
		.content {
			height: auto;
			overflow: auto;
			padding-top: 0!important;
		}
	}
</style>